const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const root = process.cwd()


const config = {
	mode: 'development',
	devtool: 'cheap-module-source-map',
	devServer: {
		hot: true,
		inline: true,
		disableHostCheck: true,
		stats: "errors-only",
		open: true,
		contentBase: [root, path.join(root, 'dist')]
	},
	entry: {
		index: './src/index',
		common: [
			path.resolve(root, './src/core/config'),
			path.resolve(root, './src/utils/listener'),
			// path.resolve(root, './src/core/video'),
			path.resolve(root, './src/core/shader'),
		],
	},
	output: {
		filename: '[name].[hash:4].js',
		path: path.resolve(root, 'dist'),
		publicPath: '/'
	},
	resolve: {
		alias: {
			'@src': path.join(root, 'src'),
			'@static': path.join(root, 'static'),
		}
	},
	externals: {
		'detector': 'detector',
		'xor4096': 'xor4096',
		'THREE': 'THREE',
	},
	module: {
		rules: [
			{
				test: /\.js[x]?$/,
				use: [{
					loader: 'babel-loader',
					options: {
						presets: ['@babel/preset-env'],
					}
				}],
				exclude:/node_modules/,
				include: [
					path.resolve(root, 'src'),
					path.resolve(root, 'static'),
				]
			},
			{
				test: /\.(less|css)$/,
				use: [
					MiniCssExtractPlugin.loader,
					'css-loader',
					'postcss-loader',
					'less-loader',
				],
				exclude:/node_modules/,
				include: [
					path.resolve(root, 'src'),
					path.resolve(root, 'static'),
				]
			},
			{
				test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2|gexf|htc)$/,
				use: [{
					loader: 'url-loader',
					options: {
						limit: 10240,
						esModule: false
					}
				}],
				exclude:/node_modules/,
				include: [
					path.resolve(root, 'src'),
					path.resolve(root, 'static'),
				]
			},
		]
	},

	plugins: [
		new MiniCssExtractPlugin({
			filename: "[name].css",
			chunkFilename: "[id].css"
		}),

		new webpack.ProvidePlugin({
			// Three: path.resolve(root, './static/libraries/three.min'),
			// video: path.resolve(root, './static/libraries/video.min'),
			// xor4096: path.resolve(root, './static/libraries/xor4096.min'),
			// Detector: path.resolve(root, './static/libraries/Detector'),
		}),

		new HtmlWebpackPlugin({
        title: 'danger',
        filename: 'index.html',
        template: path.resolve(root, './index.html'),
        inject: 'body',
        chunks: ['common', 'index'],
			// 模块次序：手动
        chunksSortMode: 'manual',
    }),

		new webpack.DefinePlugin({
			'process.env': { NODE_ENV: '"development"' },
		}),

		new CleanWebpackPlugin(),
	]
}

module.exports = config;
